<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 实现原理
        1.需要一个盒子
       2.给个一样的宽高 然后变成圆 不给颜色
        3.利用box-shadow来实现 有五个值 1，X轴水平阴影位置 2.Y轴垂直阴影位子 3.模糊半径 4.全方位扩散
        4.不好看的话 可以旋转位置 看自己需求
        5.最终实现效果
         */
        div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* background-color: turquoise; */
            box-shadow: 40px 0px 0px 0px #b0e4f7;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>